/**
 * 员工列表组件
 * 显示所有员工信息
 */

import type { Employee } from '../../../types'

interface EmployeeListProps {
  employees: Employee[]
}

export function EmployeeList({ employees }: EmployeeListProps) {
  return (
    <div className="employee-list">
      <div className="employee-list-header">
        <div className="employee-header-cell">员工</div>
      </div>
      <div className="employee-list-body">
        {employees.map(employee => (
          <div key={employee.id} className="employee-item" data-employee-id={employee.id}>
            <div className="employee-info">
              {employee.avatar && (
                <img src={employee.avatar} alt={employee.name} className="employee-avatar" />
              )}
              <span className="employee-name">{employee.name}</span>
            </div>
            {employee.position && <div className="employee-position">{employee.position}</div>}
          </div>
        ))}

        {employees.length === 0 && <div className="employee-list-empty">暂无员工</div>}
      </div>
    </div>
  )
}
